<template>
  <div class="flex2 mapCen">
    <ul>
      <img
        :src="require(`@/assets/img/${query.cityThreeQxcodeKey}/${query.cityThreeTypeKey}.png`)"
        :style="'height:' + fullHeight / 2 + 'px'"
        style="width: 31.25rem; height: 31.25rem; position: absolute; top: 35%; left: 35%;"
      />
      <li class="flexC cursor map_li">
        <p class=" cursor  colorF font_s20 font_w4 textC" style="line-height: 2.5; opacity: 0.7;">{{ query.cityThreeTitleKey }}</p>
        <p class="flex JustifyContentC AlignItemsC font_wb font_s24 textC " style="color: #33ebfe;">{{ Qslrsl }}</p>
      </li>
    </ul>
    <div class="flex JustifyContentSB">
      <div class="flexC flex1 cursor font_s20 colorF" style="height: 16vh; margin-top: 2rem; padding-left:2.5rem;">
        <div class=" basis_aaxz textC ishover" @click="category = true">
          {{ query.cityThreeTitleKey }} &nbsp;
          <img src="@/assets/img/ouhai/3.png" alt="" />
        </div>
        <div class="flexC flex1 category   textC" style="margin-top:1rem ; line-height: 2.2rem;padding: 1rem 0;" v-if="category">
          <p @click="switchmap(0)" class="ishover">
            <!-- {{ query.cityThreeQxnameKey }} -->
            首页
          </p>
          <p @click="switchmap(1)" class="ishover">{{ query.cityThreeTitleKey }}</p>
        </div>
      </div>
      <div class="flex JustifyContentSA" style="margin-top:5rem;  font-weight: 400;">
        <div class="flex  mapcen_p" style="padding:2.5rem;">
          <div style="padding-right:1.5rem;"><img src="@/assets/img/home/datasea/book.png" alt="" /></div>
          <div class="flexC">
            <p class="colorF font_s16">医生工单数</p>
            <p class="font_s24" style="color: #33ebfe;">{{ ljgd }}&nbsp;单</p>
          </div>
        </div>
        <div class="flex  mapcen_p" style="padding:2.5rem;">
          <div style="padding-right: 1.5rem;"><img src="@/assets/img/home/datasea/man1.png" alt="" /></div>
          <div class="flexC">
            <p class="colorF font_s16">医生总数</p>
            <p class="font_s24" style="color: #fb9ed8;">{{ Qyys }}&nbsp;人</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AreaThreeComponentsMapCen',
  props: ['query'],

  data () {
    return {
      category: false,
      // 医生总共单数
      ljgd: '',
      // 医生总数
      Qyys: '',
      // 全市老人数量
      Qslrsl: '',
      isActive: 1,
      cityUrl: '',
      fullHeight: document.documentElement.clientHeight
    }
  },

  watch: {
    fullHeight (val) {
      if (!this.timer) {
        this.fullHeight = val
        this.timer = true
        let that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  },
  mounted () {
    this.get_bodyHeight()
    this.handle()
  },
  methods: {
    handle () {
      // console.log(this.query.cityThreeJdCodeKey)
      this.$http.post(this.$api.Ljgd.ljgd, 'jdcode=' + this.query.cityThreeJdCodeKey, true).then(result => {
        this.ljgd = result.data.response.ServiceTotal
        // console.log('2.医生总共单数', result.data.response)
      })
      this.$http.post(this.$api.Qyys.qyys, 'jdcode=' + this.query.cityThreeJdCodeKey, true).then(result => {
        this.Qyys = result.data.response.TotalDoctor
        // console.log('6. 医生总数', result.data.response)
      })
      // 10.全市老人数量

      this.$http.post(this.$api.Qslrsl.qslrsl, 'jdcode=' + this.query.cityThreeJdCodeKey, true).then(result => {
        this.Qslrsl = result.data.response.countElderTotal
        // console.log('10.全市老人数量')
      })
    },
    get_bodyHeight () {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight - 140
        })()
      }
    },

    switchmap (index) {
      this.category = !this.category
      this.isActive = index
      if (index === 0) {
        this.$router.go(-2)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mapCen {
  .basis_aaxz {
    width: 9.125rem;
    height: 3.4375rem;
    background: url(../../../assets/img/ouhai/ouhai.png);
    background-size: 100% 100%;
    line-height: 3rem;
  }
  .category {
    width: 9.125rem;
    height: 3.4375rem;
    background: url(../../../assets/img/ouhai/1.png);
    background-size: 100% 100%;
    line-height: 3.4375rem;
  }
  .map_li {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .ishover:hover {
    color: #33ebfe;
    font-size: 1.375rem;
  }
}
</style>
